<template>
  <!--列表 -->
  <div class="flex-1 flex relative overflow-hidden pb-16">
    <BaseList :data-source="dataSource" :loading="loading" class="flex-1 overflow-auto">
      <template #renderItem="{ item }">
        <div class="py-2 px-3 flex justify-between items-center list-items" :class="{ active: store.currentRole?.id === item.id }" @click="onSelect(item)">
          <div class="w-[80%]">
            <div class="name font-semibold">{{ item.permissonCode }}</div>
            <div class="mt-1 truncate text-xs text-gray-400">{{ item.memo || '-' }}</div>
          </div>
          <div v-if="type" class="dropdown">
            <a-dropdown :get-popup-container="(trigger) => trigger.parentNode">
              <div class="px-2 py-1 hover:bg-gray-300 rounded flex items-center"><EllipsisOutlined :style="{ fontSize: '18px' }" /></div>
              <template #overlay>
                <a-menu>
                  <a-menu-item key="1"> <BaseButton size="small" type="link" @click="onOpenAdd(item)">编辑</BaseButton> </a-menu-item>
                  <a-menu-item key="2">
                    <BaseButton confirm-text="确认删除？" danger size="small" type="link" @click="onDelete(item)">删除</BaseButton>
                  </a-menu-item>
                </a-menu>
              </template>
            </a-dropdown>
          </div>
        </div>
      </template>
    </BaseList>
    <a-card v-if="type" class="absolute bottom-0 w-full">
      <BaseButton type="primary" block ghost :icon="h(PlusOutlined)" @click="onOpenAdd()"> 新增角色 </BaseButton>
    </a-card>
    <AddModal v-model:open="openAdd" :row-data="currentRow" @success="onSuccess" />
  </div>
</template>
<script setup>
import { ref, watch, h } from 'vue'
import { message } from 'ant-design-vue'
import { EllipsisOutlined, PlusOutlined } from '@ant-design/icons-vue'
import { post } from '@/utils/request'
import useStore from '../store'
import AddModal from './AddModal'

const props = defineProps({
  rowData: {
    type: Object,
    default: () => ({})
  },
  type: {
    type: Boolean,
    default: true
  }
})
const store = useStore()
const emit = defineEmits(['select'])

const rowRole = ref({})
const openAdd = ref(false)
const currentRow = ref(null)
const params = ref({ status: 1 })
const { loading, dataSource, getData } = useFetch({
  url: '/operation/opex/getRoleInfoList',
  params,
  immediate: true,
  onSuccess: (data) => {
    emit('select', data?.[0] || {})
    if (Object.keys(rowRole.value).length) {
      store.currentRole = rowRole.value
    } else {
      store.currentRole = data?.[0] || {}
    }
  }
})
const onSuccess = async (data) => {
  rowRole.value = data
  getData()
}

watch(
  () => props.rowData.status,
  (val) => val && getData()
)

const onOpenAdd = (row) => {
  currentRow.value = row
  openAdd.value = true
}
const onDelete = async (row) => {
  const { code, msg } = await post('/operation/opex/doDelRoleInfo', row)
  if (code !== 0) return message.error(msg)
  message.success('删除成功')
  getData()
}
const onSelect = (select) => {
  store.currentRole = select
  emit('select', select)
}
defineExpose({
  getData
})
</script>
<style lang="less" scoped>
.list-items {
  cursor: pointer;
  &:hover {
    .dropdown {
      visibility: visible;
    }
  }
  &.active {
    .name {
      color: var(--primary-color);
    }
  }
  .dropdown {
    visibility: hidden;
    transition: all 0.3s;
  }
}
</style>
